<template>
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
    <el-breadcrumb-item>权限管理</el-breadcrumb-item>
    <el-breadcrumb-item>角色列表</el-breadcrumb-item>
  </el-breadcrumb>

  <el-card class="box-card">
    <el-row>
      <el-button type="primary" :icon="Plus">新增角色</el-button>
    </el-row>
    <el-row>
      <el-table :data="tableDate.authorList" stripe class="table">
        <el-table-column type="expand">
          <template #default="scope">
            <el-row v-for="m in scope.row.menus" :key="m.id" class="padding-l100">
              <el-col :span="2">
                <el-tag type="success" closable @click="removeMenu(scope.row,m.id)">{{ m.name }}</el-tag>
              </el-col>
              <el-col :span="1">
                <el-icon>
                  <CaretRight/>
                </el-icon>
              </el-col>
              <el-col :span="10">
                <el-tag v-for="cm in m.children" :key="cm.id" closable @close="removeMenu(scope.row,cm.id)">
                  {{ cm.name }}
                </el-tag>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="id" width="180"/>
        <el-table-column prop="name" label="名称" width="180"/>
        <el-table-column prop="desc" label="详情"/>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button>编辑</el-button>
            <el-button type="primary" @click="showMenuDialog(scope.row)">分配权限</el-button>
            <el-button type="warning">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </el-card>

  <el-dialog
      v-model="menuDialogVisible"
      title="分配权限"
      width="40%"
      :before-close="handleClose"
  >
    <el-tree
        style="max-width: 600px"
        :data="menuList"
        :props="menuProps"
        @node-click="handleNodeClick"
        show-checkbox
        node-key="id"
        ref="treeRef"
        default-expand-all
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="menuDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitMenu()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup>
import {ArrowRight, CaretRight, Plus} from "@element-plus/icons-vue";
import api from "../api/index";
import {reactive, onMounted, ref, nextTick} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";

let menuDialogVisible = ref(false)
const tableDate = reactive({
  authorList: []
})
let menuList = reactive([])
let menuProps = {
  children: 'children',
  label: 'name'
}
let keyList = []
const treeRef = ref(null)
let rid = ref(null)

onMounted(() => {
  get_author_list()
  get_menu_list()
})
const get_author_list = () => {
  api.get_roles().then(res => {
    tableDate.authorList = res.data.data
  })
}
//删除角色权限
const removeMenu = (row, mid) => {
  ElMessageBox.confirm(
      '确认要删除该角色的权限吗？',
      'Warning',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        api.del_role_menu(row.id, mid).then(res => {
          if (res.data.status === 200) {
            ElMessage({
              message: res.data.msg,
              type: 'success',
            })
            get_author_list()
          } else {
            ElMessage({
              message: res.data.msg,
              type: 'warning',
            })
          }
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
}

const showMenuDialog = (row) => {
  menuDialogVisible.value = true
  keyList = []
  row.menus.forEach(item =>{
    item.children.forEach(citem =>{
      keyList.push(citem.id)
    })
  })
  //给树结构设置默认选中
  nextTick(()=>{
    treeRef.value.setCheckedKeys(keyList)
  })
  rid.value = row.id
}

const get_menu_list = () => {
  api.get_menu().then(res => {
    menuList = res.data.data
  })
}

const submitMenu = ()=>{
   let mids = [
      treeRef.value.getCheckedKeys(),
      treeRef.value.getHalfCheckedKeys()
  ]
  mids = mids.join(',')
  api.set_menu(rid.value,{'mids':mids}).then(res=>{
    if (res.data.status === 200) {
      ElMessage({
        message: res.data.msg,
        type: 'success',
      })
      menuDialogVisible.value = false
      get_author_list()
    } else {
      ElMessage({
        message: res.data.msg,
        type: 'warning',
      })
    }
  })
}
</script>

<style scoped>
.box-card {
  margin-top: 20px;
}

.padding-l100 {
  padding-left: 100px;
}
</style>